<template>
	<!-- 使用属性绑定设置 labelPosition -->
	<el-form :model="ruleForm2" label-position="left" :rules="rules2" ref="ruleForm2" label-width="0px" class="demo-ruleForm login-container">
		<h3 class="title">系统登录</h3>
		<!-- Logo图片 -->
		<!--        <div class="logoImg">
          <el-image style="width: 150px; height: 60px ;text-align: center;" :src="imageUrl"></el-image>
        </div> -->
		<!-- 使用el-form 包裹 input元素 -->
		<el-form-item prop="account">
			<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="用户名"></el-input>
		</el-form-item>

		<el-form-item prop="checkPass">
			<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
		</el-form-item>

		<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>

		<el-form-item style="width: 100%;">
			<el-button type="primary" style="width: 100%;" @click.native.prevent="onSubmit" :loading="logining">登陆</el-button>
			<el-button style="width: 100%; margin-left: 0;" @click.native.prevent="handleReset2">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
    import {requestLogin} from '../api/api';
	export default {
		data() {
			return {
				imageUrl: require('../assets/logo-test.png'),
				checked: true,
				logining: false,
				ruleForm2: {
					account: 'admin',
					checkPass: '123456',
				},
				rules2: {
					account: [{
						require: true,
						message: '请输入账号',
						trigger: 'blur'
					}, ],
					checkPass: [{
						require: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ]
				},
			}
		},
		methods: {
			handleReset2() {
				this.ruleForm2.account = this.ruleForm2.checkPass = '';
			},
			onSubmit() {
				// var _this = this;
				this.$refs.ruleForm2.validate((valid) => {
					if (valid) {
						this.logining = true;
						//NProgress.start();
						var loginParams = {
							username: this.ruleForm2.account,
							password: this.ruleForm2.checkPass
						};
						requestLogin(loginParams).then(data => {
							this.logining = false;
							//NProgress.done();
							let {msg,code,user} = data;
							if (code !== 200) {
								this.$message({
									message: msg,
									type: 'error'
								});
							} else {
								sessionStorage.setItem('user', JSON.stringify(user));
								this.$router.push('/table');
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
				this.$router.push('/Main')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login-container {
		/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;

		.title {
			margin: 0px auto 40px auto;
			text-align: center;
			color: #505458;
		}

		.remember {
			margin: 0px 0px 35px 0px;
		}
	}
</style>
